<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">

    <meta name="description" content="Violate Responsive Admin Template">
    <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

    <title>Super Admin Responsive Template</title>

    <!-- CSS -->
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/animate.min.css" rel="stylesheet">
    <link href="../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../static/css/form.css" rel="stylesheet">
    <link href="../static/css/calendar.css" rel="stylesheet">
    <link href="../static/css/media-player.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">
    <link href="../static/css/icons.css" rel="stylesheet">
    <link href="../static/css/generics.css" rel="stylesheet">
</head>
<body id="skin-blur-violate">
<!-- top-menu -->
<div th:replace="commons/top-menu :: #header"></div>

<div class="clearfix"></div>

<section id="main" class="p-relative" role="main">

    <!-- Sidebar -->
    <aside th:replace="commons/side-menu :: #sidebar"></aside>

    <!-- Content -->
    <section id="content" class="container">


        <!-- Breadcrumb -->
        <ol class="breadcrumb hidden-xs">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ol>

        <h4 class="page-title">TABLES</h4>

        <!-- Deafult Table -->
        <div class="block-area" id="defaultStyle">
            <h3 class="block-title">Default Style</h3>
            <table class="table tile">
                <thead>
                <tr>
                    <th>No.</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>Jhon</td>
                    <td>Makinton</td>
                    <td>@makinton</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Malinda</td>
                    <td>Hollaway</td>
                    <td>@hollway</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Wayn</td>
                    <td>Parnel</td>
                    <td>@wayne123</td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- Responsive Table -->
        <div class="block-area" id="responsiveTable">
            <h3 class="block-title">Responsive Table</h3>
            <div class="table-responsive overflow">
                <table class="table tile">
                    <thead>
                    <tr>
                        <th>No.</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Password</th>
                        <th>Email</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Jhon</td>
                        <td>Makinton</td>
                        <td>@makinton</td>
                        <td>123@makinton</td>
                        <td>mak@live.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Malinda</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                        <td>hollaway@mal</td>
                        <td>holla@asianet.ch</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Wayn</td>
                        <td>Parnel</td>
                        <td>@wayne123</td>
                        <td>wayn@3rt</td>
                        <td>wayne-parn@gmail.com</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Bordered -->
        <div class="block-area" id="tableBordered">
            <h3 class="block-title">Table Bordered</h3>
            <div class="table-responsive overflow">
                <table class="table table-bordered tile">
                    <thead>
                    <tr>
                        <th>No.</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Jhon</td>
                        <td>Makinton</td>
                        <td>@makinton</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Malinda</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Wayn</td>
                        <td>Parnel</td>
                        <td>@wayne123</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Table Hover -->
        <div class="block-area" id="tableHover">
            <h3 class="block-title">Table with Hover Style</h3>
            <div class="table-responsive overflow">
                <table class="table table-bordered table-hover tile">
                    <thead>
                    <tr>
                        <th>No.</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Jhon</td>
                        <td>Makinton</td>
                        <td>@makinton</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Malinda</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Wayn</td>
                        <td>Parnel</td>
                        <td>@wayne123</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Table Condensed -->
        <div class="block-area" id="tableCondensed">
            <h3 class="block-title">Table Condensed</h3>
            <div class="table-responsive overflow">
                <table class="table tile table-condensed">
                    <thead>
                    <tr>
                        <th>No.</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Jhon</td>
                        <td>Makinton</td>
                        <td>@makinton</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Malinda</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Wayn</td>
                        <td>Parnel</td>
                        <td>@wayne123</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Table Striped -->
        <div class="block-area" id="tableStriped">
            <h3 class="block-title">Table Striped</h3>
            <div class="table-responsive overflow">
                <table class="tile table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>No.</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Jhon</td>
                        <td>Makinton</td>
                        <td>@makinton</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Malinda</td>
                        <td>Hollaway</td>
                        <td>@hollway</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Wayn</td>
                        <td>Parnel</td>
                        <td>@wayne123</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>TB - Monthly</td>
                        <td>05/04/2012</td>
                        <td>Call in to confirm</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>TB - Monthly</td>
                        <td>06/04/2012</td>
                        <td>Pending</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>TB - Monthly</td>
                        <td>07/04/2012</td>
                        <td>Call in to confirm</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>TB - Monthly</td>
                        <td>08/04/2012</td>
                        <td>Call in to confirm</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>TB - Monthly</td>
                        <td>09/04/2012</td>
                        <td>Call in to confirm</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
    <br/><br/>
</section>

<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="../static/js/jquery.min.js"></script> <!-- jQuery Library -->

<!-- Bootstrap -->
<script src="../static/js/bootstrap.min.js"></script>

<!-- UX -->
<script src="../static/js/scroll.min.js"></script> <!-- Custom Scrollbar -->

<!-- Other -->
<script src="../static/js/calendar.min.js"></script> <!-- Calendar -->
<script src="../static/js/feeds.min.js"></script> <!-- News Feeds -->


<!-- All JS functions -->
<script src="../static/js/functions.js"></script>
</body>
</html>

